<template>
  <view class="feedback">
    <view class="feedback_right" @click="ToFeedback">
      <uni-icons type="help" size="20"></uni-icons>
      <view class="feedback-title">反馈记录</view>
    </view>
    <view class="feedback-y">
      <view class="feedback-y-top feedback-img-title">
        <text>问题和意见</text>
        <text class="required-star">*</text>
      </view>
      <view class="feedback-y-content">
        <uni-easyinput
          type="textarea"
          v-model="TextValue"
          placeholder="请在这里输入反馈内容(不少于10个字)"
        ></uni-easyinput>
      </view>
    </view>
    <view class="feedback-add">
      <view class="feedback-y-top feedback-img-title">
        <text>图片</text>
        <text class="required-star">*</text>
      </view>
      <view class="feedback-add-content">
        <view class="img-list">
          <view v-for="(img, idx) in images" :key="img" class="img-item">
            <image :src="img" class="img-preview" mode="aspectFill" />
            <view class="img-remove" @click="removeImage(idx)">×</view>
          </view>
          <view v-if="images.length < 6" class="img-add" @click="chooseImage"
            >+</view
          >
        </view>
      </view>
    </view>
    <view class="feedback-introduce">
      <view class="feedback-introduce-content">
        <text>{{ Textana }}</text>
      </view>
    </view>
    <view class="feedback-footer">
      <button class="feedback-submit-btn" @click="submitFeedback">
        提交反馈
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { postFeedbackAPI } from "@/api/feedback";
import { getAnaAPI } from "@/api/ana";
const TextValue = ref("");
const images = ref<string[]>([]);
const Textana = ref("");
const chooseImage = () => {
  uni.chooseImage({
    count: 6,
    sizeType: ["original", "compressed"],
    sourceType: ["album", "camera"],
    success: (res) => {
      if (Array.isArray(res.tempFilePaths)) {
        res.tempFilePaths.forEach((p: string, i: number) => console.log(i, p));
        const newImages = [...images.value, ...res.tempFilePaths].slice(0, 6);
        images.value = newImages;
      } else if (typeof res.tempFilePaths === "string") {
        const newImages = [...images.value, res.tempFilePaths].slice(0, 6);
        images.value = newImages;
      }
    },
    fail: (err) => {
      console.error("选择图片失败:", err);
    },
  });
};

const removeImage = (idx: number) => {
  images.value.splice(idx, 1);
};

const submitFeedback = async () => {
  if (TextValue.value.trim().length < 10) {
    uni.showToast({ title: "请至少输入10个字", icon: "none" });
    return;
  }
  if (images.value.length === 0) {
    uni.showToast({ title: "请至少上传一张图片", icon: "none" });
    return;
  }
  const uploadPromises = images.value.map((filePath) => {
    return uni.uploadFile({
      url: "/feedback/image",
      filePath,
      name: "files",
      method: "POST",
    });
  });
  const resArr = await Promise.all(uploadPromises);
  const idImage: any = [];
  resArr.forEach(async (res) => {
    const data = JSON.parse(res.data);
    if (data.code === 200 || data.code === "200") {
      idImage.push(data.data[0]?.id);
    } else {
      console.warn("上传失败", data.msg);
    }
  });

  if (idImage.length === images.value.length) {
    const res: any = await postFeedbackAPI({
      content: TextValue.value,
      contact: "19022239191",
      imageIds: idImage,
    });
    if (res.code === "200") {
      uni.showToast({ title: "反馈已提交", icon: "success" });
    }
  } else {
    uni.showToast({ title: "提交失败", icon: "none" });
  }
  TextValue.value = "";
  images.value = [];
};

const AnaData = async () => {
  const res: any = await getAnaAPI();
  Textana.value = res.text;
};

//
const ToFeedback = () => {
  uni.navigateTo({
    url: "/pages/feedback/detail/detail",
  });
};

onLoad(() => {
  AnaData();
});
</script>

<style lang="scss">
page {
  height: 100%;
  width: 100%;
  background-color: rgb(242, 244, 245);
}
.feedback {
  display: flex;
  flex-direction: column;
  margin: 0 40rpx;
  .feedback-y {
    flex-shrink: 0;
    margin: 80rpx 0 20rpx 0;
    height: 350rpx;
  }
  .feedback-add {
    flex-shrink: 0;
    margin: 50rpx 0;
    height: 200rpx;
    .feedback-add-content {
      height: 160rpx;
      background-color: #fff;
    }
  }
  .feedback-introduce {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 100rpx 0;
    height: 300rpx;
    .feedback-introduce-content {
      text-align: center;
      color: #aaa;
      font-size: 24rpx;
    }
  }
}
.feedback-y-top {
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  height: 60rpx;
}
.feedback-y-content {
  flex: 1;
  height: 100%;
  // 固定easyinput高度
  :deep(.uni-easyinput__content) {
    height: 350rpx !important;
    min-height: 350rpx !important;
    max-height: 350rpx !important;
    // border-color: #e0e0e0 !important;
    box-shadow: none !important;
  }
  :deep(textarea) {
    padding-top: 30rpx !important;
    font-size: 28rpx !important;
    color: #000000 !important;
    height: 350rpx !important;
    min-height: 350rpx !important;
    max-height: 350rpx !important;
  }
  :deep(.uni-easyinput__content.is-focused) {
    border-color: #e0e0e0 !important;
    box-shadow: none !important;
  }
}
.feedback-add-content {
  display: flex;
  min-height: 180rpx;
  background-color: #fff;
  padding: 20rpx;
  .img-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    align-items: center;
  }
  .img-item {
    position: relative;
    width: 120rpx;
    height: 120rpx;
    border-radius: 12rpx;
    overflow: hidden;
    background: #f5f5f5;
    .img-preview {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 12rpx;
    }
    .img-remove {
      position: absolute;
      top: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      width: 36rpx;
      height: 36rpx;
      text-align: center;
      line-height: 36rpx;
      border-radius: 50%;
      font-size: 28rpx;
      z-index: 2;
    }
  }
  .img-add {
    width: 120rpx;
    height: 120rpx;
    border-radius: 12rpx;
    background: #e0e0e0;
    color: #aaa;
    font-size: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}
.feedback-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 80rpx;
  z-index: 99;
  display: flex;
  justify-content: center;
  background: transparent;
  pointer-events: none;
  .feedback-submit-btn {
    pointer-events: auto;
    width: 90vw;
    max-width: 600rpx;
    height: 90rpx;
    background: #92beab;
    color: #fff;
    font-size: 36rpx;
    border: none;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 16rpx rgba(146, 190, 171, 0.15);
  }
  .safe-area-inset-bottom {
    height: env(safe-area-inset-bottom);
    width: 0;
    display: block;
  }
}
.feedback-img-title {
  position: relative;
  display: flex;
  align-items: center;
  .required-star {
    color: #e74c3c;
    font-size: 28rpx;
    margin-left: 8rpx;
    line-height: 1;
    font-weight: bold;
    // 可选：让星号稍微上移一点
    position: relative;
    top: -8rpx;
  }
}
.feedback_right {
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  margin-left: auto;
}
</style>
